//LiuZh 2017-07-02
import React, {Component} from 'react';

import {
    View,
    Image,
    Text,
    StyleSheet,
    TouchableWithoutFeedback,
} from 'react-native';

let itemPlayImg = require('../../../img/video_item_playing.png');

export default class VideoFLItem extends Component {

    constructor(props) {
        super(props);

        this.state = ({
            currItem: -1,
        })
    }

    componentDidMount() {
        this.setState({
            currItem: this.props.currId,
        })
    }

    changeCurrItem = (curr) => {
        //  alert('changeCurrItem');
        this.setState({
            currItem: curr,
        })
    }

    render() {
        let c = this.state.currItem === this.props.data.ORDER_;
        //  alert('currItem:'+this.state.currItem+";order:"+this.props.data.ORDER_+";equalL:"+c);
        let order = this.props.data.ORDER_;

        return (
            <TouchableWithoutFeedback
                style={styles.flItem}
                onPress={() => {
                    this.props.onPress(order)
                }}>
                <View style={styles.flItem}>
                    {
                        this.state.currItem === this.props.data.ORDER_ ?
                            (<Image style={{height: 20, width: 20, marginRight: 14}}
                                    source={itemPlayImg}/>) : (<View/>)
                    }
                    <Text style={{color: this.state.currItem === this.props.data.ORDER_ ? '#3223d3' : '#1c1818'}}>
                        {this.props.data.TITLE1}
                    </Text>
                </View>
            </TouchableWithoutFeedback>
        )
    }

}


const styles = StyleSheet.create({
    flItem: {
        height: 50,
        backgroundColor: '#FFF',
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        paddingLeft: 20,
        marginBottom: 1
    }

});